<template>
  <div>
    <basic-page-vxe
      ref="basePage"
      list-api="findPredictionPressureByCondition"
      del-api="deletePredictionPressureById"
      export-api="exportPredictionPressure"
      :export-name="$route.meta.title"
      :search-form="basicData.searchForm"
      :search-handle="basicData.searchHandle"
      :columns="basicData.columns"
      :seq-config="{ startIndex: 1}"
      :is-tree-data="true"
      :show-pagination="true"
      keep-source
      @handleDetail="handleDetail"
    />
    <!--新增-->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="1200px" :close-on-click-modal="false">
      <el-form ref="dataForm" :rules="rules" :model="temp" :inline="true" label-position="right" label-width="180px" style="width: 100%">
        <h2>压力预测</h2>
        <el-divider>参数输入</el-divider>
        <el-form-item label="井名" prop="wellName">
          <el-select v-model="temp.wellName" filterable remote style="width: 360px" placeholder="请选择" :remote-method="remoteMethod" :loading="loading">
            <el-option
              v-for="item in wellOptions"
              :key="item.id"
              :label="item.wellAreaName"
              :value="item.wellAreaName"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="井类型" prop="wellType">
          <el-select v-model="temp.wellType" style="width: 360px" placeholder="请选择">
            <el-option
              v-for="item in wellTypeOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="方案名称" prop="planName">
          <el-input v-model="temp.planName" style="width: 360px" placeholder="请输入" maxlength="32" clearable />
        </el-form-item>
        <el-form-item label="垂深(m)" prop="injectionDepth">
          <el-input v-model="temp.injectionDepth" style="width: 360px" oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入正确格式" maxlength="32" clearable />
        </el-form-item>
        <el-form-item label="地层压力/破裂压力(MPa)" prop="formationPressure">
          <el-input v-model="temp.formationPressure" style="width: 360px" oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入正确格式" maxlength="32" clearable />
        </el-form-item>
        <el-form-item label="地层温度" prop="formationTemperature">
          <el-input v-model="temp.formationTemperature" style="width: 360px" oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入正确格式" maxlength="32" clearable />
        </el-form-item>
        <el-form-item label="最小渗透率(mD)" prop="permeability">
          <el-input v-model="temp.permeability" style="width: 360px" oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入正确格式" maxlength="32" clearable />
        </el-form-item>
        <el-form-item label="CO2注入厚度(m)" prop="injectionThickness">
          <el-input v-model="temp.injectionThickness" style="width: 360px" oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入正确格式" maxlength="32" clearable />
        </el-form-item>
        <el-form-item label="CO2注入段长度(m)" prop="injectionLength">
          <el-input v-model="temp.injectionLength" style="width: 360px" oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入正确格式" maxlength="32" clearable />
        </el-form-item>
        <el-form-item label="井口CO2密度(g/cm3)" prop="wellHeadDensity">
          <el-input v-model="temp.wellHeadDensity" style="width: 360px" oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入正确格式" maxlength="32" clearable />
        </el-form-item>
        <el-form-item label="CO2注入量(t/d)" prop="dailyInjection">
          <el-input v-model="temp.dailyInjection" style="width: 360px" oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入正确格式" maxlength="32" clearable />
        </el-form-item>
      </el-form>
      <el-form ref="dataForm1" :rules="rules" :model="temp1" :inline="true" label-position="right" label-width="180px" style="width: 100%">
        <el-form-item v-show="false" label="井名" prop="wellName">
          <el-input v-model="temp1.wellName" style="width: 360px" placeholder="请输入" maxlength="32" clearable />
        </el-form-item>
        <el-form-item v-show="false" label="井类型" prop="wellType">
          <el-select v-model="temp1.wellType" style="width: 360px" placeholder="请选择">
            <el-option
              v-for="item in wellTypeOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-show="false" label="方案名称" prop="planName">
          <el-input v-model="temp1.planName" style="width: 360px" placeholder="请输入" maxlength="32" clearable />
        </el-form-item>
        <el-form-item v-show="false" label="垂深(m)" prop="injectionDepth">
          <el-input v-model="temp1.injectionDepth" style="width: 360px" oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入正确格式" maxlength="32" clearable />
        </el-form-item>
        <el-form-item v-show="false" label="地层压力/破裂压力(MPa)" prop="formationPressure">
          <el-input v-model="temp1.formationPressure" style="width: 360px" oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入正确格式" maxlength="32" clearable />
        </el-form-item>
        <el-form-item v-show="false" label="温度(℃)" prop="formationTemperature">
          <el-input v-model="temp1.formationTemperature" style="width: 360px" oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入正确格式" maxlength="32" clearable />
        </el-form-item>
        <el-form-item v-show="false" label="最小渗透率(mD)" prop="permeability">
          <el-input v-model="temp1.permeability" style="width: 360px" oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入正确格式" maxlength="32" clearable />
        </el-form-item>
        <el-form-item v-show="false" label="CO2注入厚度(m)" prop="injectionThickness">
          <el-input v-model="temp1.injectionThickness" style="width: 360px" oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入正确格式" maxlength="32" clearable />
        </el-form-item>
        <el-form-item v-show="false" label="CO2注入段长度(m)" prop="injectionLength">
          <el-input v-model="temp1.injectionLength" style="width: 360px" oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入正确格式" maxlength="32" clearable />
        </el-form-item>
        <el-form-item v-show="false" label="井口CO2密度(g/cm3)" prop="wellHeadDensity">
          <el-input v-model="temp1.wellHeadDensity" style="width: 360px" oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入正确格式" maxlength="32" clearable />
        </el-form-item>
        <el-form-item label="井底CO2密度(g/cm3)" prop="wellBottomDensity">
          <el-input v-model="temp1.wellBottomDensity" style="width: 360px" maxlength="32" clearable disabled />
        </el-form-item>
        <el-form-item label="井底CO2粘度(mPa.s)" prop="wellBottomViscosity">
          <el-input v-model="temp1.wellBottomViscosity" style="width: 360px" maxlength="32" clearable disabled />
        </el-form-item>
        <el-form-item v-show="false" label="CO2注入量(t/d)" prop="dailyInjection">
          <el-input v-model="temp1.dailyInjection" style="width: 360px" oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入正确格式" maxlength="32" clearable />
        </el-form-item>
        <el-form-item label="平均CO2密度(g/cm3)" prop="averageDensity">
          <el-input v-model="temp1.averageDensity" style="width: 360px" oninput="value=value.replace(/[^0-9.]/g,'')" maxlength="32" clearable disabled />
        </el-form-item>
        <el-form-item label="CO2柱压力(MPa)" prop="columnPressure">
          <el-input v-model="temp1.columnPressure" style="width: 360px" oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="" maxlength="32" clearable disabled />
        </el-form-item>
        <el-form-item label="Bg" prop="densityRatio">
          <el-input v-model="temp1.densityRatio" style="width: 360px" oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="" maxlength="32" clearable disabled />
        </el-form-item>
        <el-form-item label="a值(m)" prop="valueA">
          <el-input v-model="temp1.valueA" style="width: 360px" oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="" maxlength="32" clearable disabled />
        </el-form-item>
        <el-form-item label="分子部分" prop="molecularPart">
          <el-input v-model="temp1.molecularPart" style="width: 360px" oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="" maxlength="32" clearable disabled />
        </el-form-item>
        <el-form-item label="生产压差(MPa)" prop="productionPressureDvalue">
          <el-input v-model="temp1.productionPressureDvalue" style="width: 360px" oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="" maxlength="32" clearable disabled />
        </el-form-item>
        <div class="predict_buttom">
          <el-button v-if="dialogStatus==='update'" type="primary" @click="dialogStatus==='update'?createData():updateData()">
            另存为
          </el-button>
        </div>
        <div class="predict_buttom">
          <el-button type="primary" @click="calculateData()">
            计算CO2注入压力
          </el-button>
        </div>
        <el-divider>预测结果</el-divider>
        <el-form-item label="井底流压(MPa)" prop="flowingPressure">
          <el-input v-model="temp1.flowingPressure" style="width: 360px" placeholder="" maxlength="32" clearable disabled />
        </el-form-item>
        <el-form-item label="预测最大注入压力(MPa)" prop="injectionPressure">
          <el-input v-model="temp1.injectionPressure" style="width: 360px" placeholder="" maxlength="32" clearable disabled />
        </el-form-item>
        <el-form-item label="赋予安全系数后压力(MPa)" prop="factorPressure">
          <el-input v-model="temp1.factorPressure" style="width: 360px" placeholder="" maxlength="32" clearable disabled />
        </el-form-item>
        <!---->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          确定
        </el-button>
      </div>
    </el-dialog>
    <!--项目类型-->
    <el-dialog title="井类型" :visible.sync="dialogTableVisible" :close-on-click-modal="false">
      <dialog-dic-type :table-data="wellTypeOptions" @getType="getType" />
    </el-dialog>
  </div>
</template>

<script>
import { addPredictionPressure, updatePredictionPressure, calculatePredictionPressure2 } from '@/api/prediction'
import { getSysDictByType, querySysOrgTree, queryUsername } from '@/api/admin'
import { findWellAreaNameByCondition } from '@/api/base'
export default {
  name: '',
  /* components: {
      Tinymce
  }, */
  directives: {},
  filters: {},
  data() {
    return {
      basicData: {
        columns: [
          // { config: { title: '方案编号', type: 'seq', minWidth: '80' }},
          { config: { title: '井名', field: 'wellName', fixed: 'left', minWidth: '200' }, type: 'tree', className: 'swpuLink' },
          { config: { title: '井类型', field: 'wellType', showOverflow: true, minWidth: '100' }, type: 'filter', option: [] },
          { config: { title: '方案名', field: 'planName', showOverflow: true, minWidth: '120' }},
          { config: { title: '注入层垂深(m)', field: 'injectionDepth', showOverflow: true, minWidth: '120' }},
          { config: { title: '地层温度(℃)', field: 'formationTemperature', width: '120' }},
          { config: { title: '地层压力(MPa)', field: 'formationPressure', width: '120' }},
          { config: { title: 'CO2注入厚度(m)', field: 'injectionThickness', width: '130' }},
          { config: { title: 'CO2注入段长度(m)', field: 'injectionLength', width: '150' }},
          { config: { title: '地层渗透率(mD)', field: 'permeability', showOverflow: true, minWidth: '140' }},
          { config: { title: '井口CO2密度(g/cm3)', field: 'wellHeadDensity', showOverflow: true, minWidth: '160' }},
          { config: { title: '井底CO2密度(g/cm3)', field: 'wellBottomDensity', showOverflow: true, minWidth: '160' }},
          { config: { title: '井底CO2粘度(mPa.s)', field: 'wellBottomViscosity', showOverflow: true, minWidth: '160' }},
          { config: { title: '平均CO2密度(g/cm3)', field: 'averageDensity', showOverflow: true, minWidth: '160'/* , formatter:(rowData, rowIndex, pagingIndex, field) => {
            return rowData.averageDensity.toFixed(2)
              }*/ }},
          { config: { title: 'CO2日注入量(t/d)', field: 'dailyInjection', showOverflow: true, minWidth: '140' }},
          { config: { title: 'CO2柱压力(MPa)', field: 'columnPressure', showOverflow: true, minWidth: '140' }},
          { config: { title: '井口井底CO2密度比,Bg', field: 'densityRatio', showOverflow: true, minWidth: '170' }},
          { config: { title: 'a值(m)', field: 'valueA', showOverflow: true, minWidth: '80' }},
          { config: { title: '分子部分', field: 'molecularPart', showOverflow: true, minWidth: '100' }},
          { config: { title: '生产压差(MPa)', field: 'productionPressureDvalue', showOverflow: true, minWidth: '120' }},
          { config: { title: '井底流压(MPa)', field: 'flowingPressure', showOverflow: true, minWidth: '120' }},
          { config: { title: '最大注入压力(MPa)', field: 'injectionPressure', showOverflow: true, minWidth: '160' }},
          { config: { title: '赋予安全系数后预测压力(MPa)', field: 'factorPressure', showOverflow: true, minWidth: '220' }},
          { config: { title: '创建人', field: 'createName', minWidth: '120' }},
          { config: { title: '创建时间', field: 'createTime', width: '200' }, type: 'time' },
          { config: { title: '修改时间', field: 'updateTime', width: '200' }, type: 'time' },
          { config: { title: '操作', field: 'opt', width: '200', fixed: 'right' }, type: 'render',
            render: (h, scope) => {
              return (
                <div>
                  <el-button plain size='mini' type='primary' v-permission='update' onClick={() => this.handleUpdate(scope.row)}><i class='el-icon-edit'></i> 编辑</el-button>
                  <el-button plain size='mini' type='danger' v-permission='delete' onClick={() => this.$refs.basePage.handleDelete(scope.row)}><i class='el-icon-delete'></i> 删除</el-button>
                </div>
              )
            }
          }
        ],
        searchForm: [
          { type: 'Input', label: '井名', prop: 'wellName', width: '180px' },
          { type: 'Input', label: '方案名', prop: 'planName', width: '180px' }
          /* { type: 'Select', label: '井类型', prop: 'wellType', width: '180px', options: [] }*/
        ],
        searchHandle: [
          { label: '新增', type: 'success', icon: 'el-icon-plus', permission: 'add', handle: () => { this.handleCreate() } },
          { label: '井类型', type: 'success', icon: 'el-icon-tickets', permission: 'add', handle: () => { this.dialogTableVisible = true } }
        ]
      },
      temp: {
      },
      temp1: {
        id: '',
        wellName: '',
        planName: '',
        injectionDepth: '',
        formationPressure: '',
        formationTemperature: '',
        permeability: '',
        injectionThickness: '',
        injectionLength: '',
        wellHeadDensity: '',
        wellBottomDensity: '',
        wellBottomViscosity: '',
        dailyInjection: '',
        averageDensity: '',
        columnPressure: '',
        densityRatio: '',
        valueA: '',
        molecularPart: '',
        productionPressureDvalue: '',
        flowingPressure: '',
        injectionPressure: '',
        factorPressure: ''
      },
      wellTitles: [],
      wellOptions: [],
      wellTypeOptions: [],
      candidateOptions: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '新增',
        calculate: '计算'
      },
      rules: {
        meetingOrgId: [{ required: true, message: '请选择例会所属机构！', trigger: 'change' }],
        gasMedium: [{ required: true, message: '请选择气体介质！', trigger: 'change' }]
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      }
    }
  },
  computed: {},
  mounted() {
    this.wellTitles = this.loadAll()
  },
  created() {
    this.getType()
  },
  methods: {
    // 业务逻辑
    getType() {
      getSysDictByType('well_type').then(response => {
        this.wellTypeOptions = response.data
        this.copyWellTitlesOptions = this.wellTitlesOptions
        this.basicData.columns[1].option = response.data
      })
      queryUsername().then(response => {
        this.candidateOptions = response.data
        this.basicData.columns[21].option = response.data
      })
      querySysOrgTree().then(response => {
        this.orgOptions = response.data.list
      })
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        parentId: '0'
      }
      this.temp1 = {
        id: undefined,
        parentId: '0'
      }
    },
    handleDetail(row) {
      this.$router.push({
        name: 'pressureDetail',
        query: { id: row.id }
      })
    },
    // 项目类型
    handleType() {

    },
    // 新增
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.getUpdateInfo()
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
        this.$refs.timecy.setContent('')
      })
    },
    createData() {
      this.$refs['dataForm1'].validate((valid) => {
        if (valid) {
          addPredictionPressure(this.temp1).then(response => {
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '新增成功',
              type: 'success',
              duration: 2000
            })
            this.handleReset()
          })
        }
      })
    },
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true
        findWellAreaNameByCondition({ wellAreaName: query }).then(response => {
          this.loading = false
          this.wellOptions = response.data
        }).catch(() => {
          this.loading = false
        })
      } else {
        this.wellOptions = []
      }
    },
    calculateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          calculatePredictionPressure2(tempData/* this.temp.wellName,this.temp.wellType,this.temp.injectionDepth,this.temp.formationPressure,this.temp.formationTemperature,this.temp.permeability,this.temp.injectionThickness,this.temp.injectionLength,this.temp.wellHeadDensity,this.temp.wellBottomDensity,this.temp.wellBottomViscosity,this.temp.dailyInjection*/).then(response => {
            this.dialogFormVisible = true
            this.$notify({
              title: '成功',
              message: '计算成功',
              type: 'success',
              duration: 2000
            })

            this.handleReset()
          })
        }
      })
      // 获取分析数据
      this.getCalculateData()
    },
    getCalculateData() {
      var that = this
      const tempData = Object.assign({}, this.temp)
      calculatePredictionPressure2(tempData/* this.temp.wellName,this.temp.wellType,this.temp.injectionDepth,this.temp.formationPressure,this.temp.formationTemperature,this.temp.permeability,this.temp.injectionThickness,this.temp.injectionLength,this.temp.wellHeadDensity,this.temp.wellBottomDensity,this.temp.wellBottomViscosity,this.temp.dailyInjection*/).then(response => {
        that.temp1.wellName = response.wellName
        that.temp1.wellType = response.wellType
        that.temp1.planName = response.planName
        that.temp1.injectionDepth = response.injectionDepth
        that.temp1.formationPressure = response.formationPressure
        that.temp1.formationTemperature = response.formationTemperature
        that.temp1.permeability = response.permeability
        that.temp1.injectionThickness = response.injectionThickness
        that.temp1.injectionLength = response.injectionLength
        that.temp1.wellHeadDensity = response.wellHeadDensity
        that.temp1.wellBottomDensity = response.wellBottomDensity
        that.temp1.wellBottomViscosity = response.wellBottomViscosity
        that.temp1.dailyInjection = response.dailyInjection
        that.temp1.averageDensity = response.averageDensity
        that.temp1.columnPressure = response.columnPressure
        that.temp1.densityRatio = response.densityRatio
        that.temp1.valueA = response.valueA
        that.temp1.molecularPart = response.molecularPart
        that.temp1.productionPressureDvalue = response.productionPressureDvalue
        that.temp1.flowingPressure = response.flowingPressure
        that.temp1.injectionPressure = response.injectionPressure
        that.temp1.factorPressure = response.factorPressure
      })
    },
    handleUpdate(row) {
      this.temp = Object.assign({}, row) // copy obj
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.getUpdateInfo()
      this.$nextTick(() => {
        this.$refs['dataForm1'].clearValidate()
        const remark = row.remark ? row.remark : ''
        this.$refs.timecy.setContent(remark)
      })
    },
    updateData() {
      this.$refs['dataForm1'].validate((valid) => {
        if (valid) {
          // const tempData = Object.assign({}, this.temp)
          const tempData = Object.assign({}, this.temp)
          delete tempData.children
          delete tempData.createTime
          updatePredictionPressure(tempData).then(response => {
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '编辑成功',
              type: 'success',
              duration: 2000
            })
            this.handleReset()
          })
        }
      })
    },
    // 刷新
    handleReset() {
      this.getType()
      this.$refs.basePage.getList()
    }
  }
}
</script>

<style scoped lang="scss">
.warning{
  text-align: center;
  font-size: 20px;
}
.el-icon-info{
  font-size: 30px;
  color: orange;
}
.predict_buttom{
  float: right;
  padding-right: 70px;
}
</style>
